<template>
  <el-form-item
    :rules="item.rule"
    :label="item.label"
    :prop="item.prop"
    :placeholder="item.placeholder === undefined ? '请输入' : item.placeholder"
  >
    <span class="textStyle" v-if="item.textContent">{{
      item.textContent
    }}</span>
    <span class="textStyle1" v-if="formData[item.prop]">{{
      formData[item.prop]
    }}</span>
  </el-form-item>
</template>

<script>
export default {
  name: "textCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
};
</script>

<style scoped lang="scss">
.textStyle {
  color: #606266;
}
.textStyle1 {
  width: calc(100% - 10px);
  display: inline-block;
  text-align: justify;
  white-space: normal;
  color: #666;
  padding-right: 16px;
}
</style>
